<template>
  <div class="student-management-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <el-card shadow="hover">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="姓名" class="search-item">
            <el-input
              v-model="form.studentName"
              placeholder="请输入姓名"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="学号" class="search-item">
            <el-input
              v-model="form.number"
              placeholder="请输入学号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="班级" class="search-item">
            <el-input
              v-model="form.className"
              placeholder="请输入班级"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="search-item">
            <el-button
              type="primary"
              @click="getStudentList"
              icon="el-icon-search"
              >查询</el-button
            >
            <el-button @click="resetSearch" icon="el-icon-refresh"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-container">
      <el-button
        type="primary"
        @click="openAddDialog"
        icon="el-icon-plus"
        class="add-btn"
        >添加学生</el-button
      >
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-card shadow="hover">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="数据加载中..."
          element-loading-spinner="el-icon-loading"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          highlight-current-row
        >
          <el-table-column
            prop="studentId"
            label="ID"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="studentName"
            label="姓名"
            width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="number"
            label="学号"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="班级"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                @click="openEditStudent(scope.row)"
                type="primary"
                size="small"
                icon="el-icon-edit"
                plain
                >编辑</el-button
              >
              <el-button
                @click="deleteStudent(scope.row)"
                type="danger"
                size="small"
                icon="el-icon-delete"
                plain
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      :title="dialogTile"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
      @closed="resetForm"
    >
      <el-form
        ref="studentForm"
        :model="addAndEditForm"
        label-width="80px"
        :rules="rules"
        label-position="left"
      >
        <el-form-item label="姓名" prop="name">
          <el-input
            v-model="addAndEditForm.name"
            placeholder="请输入学生姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="number">
          <el-input
            v-model="addAndEditForm.number"
            placeholder="请输入学生学号"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-select
            v-model="addAndEditForm.classId"
            filterable
            remote
            reserve-keyword
            placeholder="请输入班级"
            :remote-method="getClassList"
            :loading="loading"
          >
            <el-option
              v-for="item in classList"
              :key="'class' + item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onClickDialogSubmit"
          :loading="submitting"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStudentList,
  addStudent,
  editStudent,
  deleteStudent,
} from "@/api/student.js";
import {
  getClassList
} from "@/api/class.js";
export default {
  data() {
    return {
      classList:[],
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      form: {
        studentName: "",
        number: "",
        className: "",
      },
      total: 0,
      dialogVisible: false,
      dialogType: 1, // 1添加 2编辑
      dialogTile: "添加学生",
      addAndEditForm: {
        id: undefined,
        name: "",
        number: "",
        classId: undefined,
      },
      loading: false,
      submitting: false,
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        number: [
          { required: true, message: "请输入学号", trigger: "blur" },
          { pattern: /^\d+$/, message: "学号必须为数字", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.getClassList();
    this.getStudentList();
  },
  methods: {
    getClassList(query) {
     this.loading = true;
      getClassList({
        name: query
      })
        .then((res) => {
          this.classList = res.rows;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getStudentList() {
      this.loading = true;
      getStudentList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.form,
      })
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    resetSearch() {
      this.form = {
        name: "",
        number: "",
      };
      this.pageNum = 1;
      this.getStudentList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getStudentList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getStudentList();
    },
    openAddDialog() {
      this.dialogType = 1;
      this.dialogTile = "添加学生";
      this.dialogVisible = true;
    },
    onClickDialogSubmit() {
      this.$refs.studentForm.validate((valid) => {
        if (valid) {
          this.submitting = true;
          if (this.dialogType == 1) {
            this.onClickAddStudent();
          } else if (this.dialogType == 2) {
            this.editStudent();
          }
        }
      });
    },
    onClickAddStudent() {
      addStudent({
        ...this.addAndEditForm,
      })
        .then((res) => {
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.getStudentList();
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    deleteStudent(row) {
      this.$confirm("确认删除该学生信息吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteStudent({
            id: row.studentId,
          }).then((res) => {
            this.$message.success("删除成功");
            this.getStudentList();
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    openEditStudent(row) {
      this.dialogType = 2;
      this.dialogVisible = true;
      this.dialogTile = "编辑学生";
      this.addAndEditForm = { 
        ...row,
        name: row.studentName,
        id: row.studentId,
         };
    },
    editStudent() {
      editStudent(this.addAndEditForm)
        .then((res) => {
          this.$message.success("编辑成功");
          this.dialogVisible = false;
          this.getStudentList();
        })
        .finally(() => {
          this.submitting = false;
        });
    },
    resetForm() {
      this.$refs.studentForm && this.$refs.studentForm.resetFields();
      this.addAndEditForm = {
        id: undefined,
        name: "",
        number: "",
        classId: undefined,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.student-management-container {
  padding: 20px;
  background-color: #f0f2f5;

  .search-container {
    margin-bottom: 20px;

    .search-item {
      margin-bottom: 0;
    }
  }

  .operation-container {
    margin-bottom: 20px;

    .add-btn {
      margin-right: 10px;
    }
  }

  .table-container {
    margin-bottom: 20px;

    ::v-deep .el-table {
      font-size: 14px;

      .el-button {
        padding: 7px 10px;
      }
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
  }
}

::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__header {
    border-bottom: 1px solid #eee;
    padding: 15px 20px;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .el-dialog__body {
    padding: 20px 30px;
  }

  .el-dialog__footer {
    border-top: 1px solid #eee;
    padding: 15px 20px;
    text-align: right;
  }
}
</style>